<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>发布视频</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link rel="stylesheet"  th:href="@{/css/file.css}" />
    <link th:href="@{/layui/step.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/js/semantic.min.js}">
    </script>
</head>
<body>

<!--发布课程基本信息-->
<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div>
                        <br>
                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;" method="post" enctype="multipart/form-data" th:action="@{/stu/center/course/submit}">
                            <div class="layui-form-item">
                                <label class="layui-form-label">课程名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="course_name" id="gameid1" placeholder="请填写课程名称" class="layui-input" lay-verify="required" required />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图片</label>
                                <div class="layui-input-inline">
                                    <a href="javascript:;" class="file">格式.gif/.jpg/.jpeg/.png
                                        <input type="file" name="course_image" required lay-verify="required|image" autocomplete="off" id="course_image">
                                    </a>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">视频</label>
                                <div class="layui-input-inline">
                                    <a href="javascript:;" class="file">格式.mp4
                                        <input type="file" name="course_video" required lay-verify="required|video" autocomplete="off" id="user-image">
                                    </a>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">类型</label>
                                <div class="layui-input-inline">
                                    <select name="coursetype_id" lay-verify="required" >
                                        <option th:each="coursetype:${coursetypes}" th:value="${coursetype.getId()}" th:text="${coursetype.getCourse_name()}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit  type="submit"  onclick="buttonsubmit();" id="buttonsubmit" data-title="开始上传" data-content="点击上传按钮后请耐心等待，页面会自动跳转">
                                        确认上传
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <hr>
        </div>
    </div>
</div>
<!--发布课程基本信息-->

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/step.js}"></script>
<script>


    layui.config({
        base:'/layui/'
    }).use([ 'form', 'step'], function () {
        var $ = layui.$
            , form = layui.form
            , step = layui.step;

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '布置课程基本信息'
            },  {
                title: '完成'
            }]
        });
        //提示
        $(document).ready(function () {
            $('#buttonsubmit').popup();
            $('#buttonsubmit').click(function () {
                $(this).removeClass("layui-btn");
                $(this).addClass("ui loading button");
                var ii = layer.load();
            })
        });
        //提示
    });

    //进行表单验证
    layui.use('form', function() {
        var form = layui.form;
        //各种基于事件的操作，下面会有进一步介绍
        form.verify({
            image: function (value, item) {
                if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(value)) {
                    return '图片格式错误';
                }
            },
            video:function (value,item) {
                if (!/\.(mp4)$/.test(value)) {
                    return '视频格式错误';
                }
            }
        })
    });
    //进行表单验证

    // function buttonsubmit(){
    //     var image=$('#course_image').val();
    //
    //     if (image == "") {
    //         alert("请上传图片");
    //         return false;
    //     } else {
    //         if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(image)) {
    //             alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
    //
    //             // $('#course_image').val()="";
    //             return false;
    //         }
    //     }
    //     return true;
    // }
</script>
</body>
</html>
